<example name="Tag">

  <file type="html">
    <div id="tags"></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';
    import checkMarkIcon from '@jetbrains/icons/checkmark.svg';

    import Tag from '@jetbrains/ring-ui/components/tag/tag';
    import hubConfig from 'ring-ui-docs/components/hub-config';

    const url = `${hubConfig.serverUri}/api/rest/avatar/default?username=Jet%20Brains`
    const renderBadgeDemo = () => (
      <span>
        <Tag>Simple</Tag>
        <Tag readOnly={true}>Read-only</Tag>
        <Tag rgTagIcon={checkMarkIcon} rgTagTitle="I am an icon title">With icon title</Tag>
        <Tag avatar={url} rgTagTitle="Tags with image" readOnly={true}>With avatar</Tag>
      </span>
    );

    render(renderBadgeDemo(), document.getElementById('tags'));
  </file>
</example>
